<template>
    <div class="item" @click="goDetail(info.id)">
        <div class="left">
            <div class="top">
                {{ info.title }}
            </div>
            <div class="bottom">
                <div>中青嘉信财富</div>
                <div>{{ $moment(info.createTime).format("YYYY-MM-DD") }}</div>
            </div>
        </div>
        <div class="right">
            <img :src="info.coverImage" alt="" srcset="" />
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: {},
            },
        },
        data() {
            return {};
        },
        mounted() {},
        methods: {
            goDetail(id) {
                this.$router.push(`/productDetail/${id}`);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .item {
        color: #333;
        display: flex;
        padding: 20px 20px 0;
        background: #fff;
        overflow-x: hidden;
        border-bottom: 1px solid #f1f1f1;
        .left {
            margin-right: 5px;
            width: 65%;
            position: relative;
            .top {
                font-size: 16px;
                line-height: 22px;
                margin: 4px 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                -webkit-box-flex: 1;
                overflow: hidden;
            }
            .bottom {
                position: absolute;
                font-size: 12px;
                color: #bbb;
                display: flex;
                bottom: 20px;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                right: 5px;
            }
        }
        .right {
            width: 148px;
            height: 82px;
            margin-bottom: 15px;
            border: 1px solid #f1f1f1;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
</style>